<template>
	<view>
		<!-- 展示输入框尾部图标 -->
		<!-- 搜索框 -->
		<view class="head">
			<!-- <uni-easyinput prefixIcon="search" class="search22" v-model="value" placeholder="请输入内容" @iconClick="onClick">
			</uni-easyinput> -->
			
			<input type="text" v-model="value" placeholder="请输入内容"  class="headSearch"/>
		</view>
		<!-- 左侧列表框 -->
		<view class="content">
			<view class="left" :style="aheight">
				<uni-list class="left-list" v-for="(item,index) in llist" :border="false">
					<uni-list-item v-if="index===(selectIndex-1)" class="left-list-item-up">
						<view slot="body" class="left-list-item" >
							<text class="left-list-item-text" @click="chose(index)">{{item}}</text>
						</view>
					</uni-list-item>
					<uni-list-item v-else-if="index===(selectIndex+1)" class="left-list-item-down" >
						<view slot="body" class="left-list-item" >
							<text class="left-list-item-text" @click="chose(index)">{{item}}</text>
						</view>
					</uni-list-item>
					<uni-list-item v-else-if="index===selectIndex" >
						<view slot="body" class="left-list-item" >
							<text class="left-list-item-text" @click="chose(index)">{{item}}</text>
						</view>
					</uni-list-item>
					<uni-list-item v-else class="left-list-item-unselect" >
						<view slot="body" class="left-list-item" >
							<text class="left-list-item-text" @click="chose(index)">{{item}}</text>
						</view>
					</uni-list-item>
				</uni-list>
			</view>
			<!-- 右侧列表框 -->
			<view class="right" :style="aheight">
                <uni-list class="right-list" v-for="(item,index) in rlist[selectIndex]" :border="false">
					<uni-list-item class="right-list-item" >
						<view slot="body" class="right-list-item" >
							<text class="right-list-item-text" >{{item}}</text>
						</view>
					</uni-list-item>
				</uni-list>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectIndex:1,
				value: "",
				llist: ["成都/永乐镇", "成都/江津村/永乐镇", "成都/江津村/永乐镇", "成都/永乐镇", "成都/江津村/永乐镇", "成都/永乐镇"],
				rlist: [
					['雁石洞迷宫','信相寺后院地道迷宫','峨眉派','55','猛虎洞穴迷宫','神仙洞迷宫'],
					['雁石洞迷宫','信相寺后院地道迷宫','asasas','峨眉派','猛虎洞穴迷宫','神仙洞迷宫'],
					[],
					['雁石洞迷宫','信相寺后院地道迷宫','峨眉派','峨眉派','2','神仙洞迷宫'],
					['雁石洞迷宫','信相寺后院地道迷宫','峨眉派','峨眉派','hnjasauhasah','神仙洞迷宫'],
					[]
				],
				rlits: [1, 2, 3, 4, 5, 6],
				aheight: "height: 1400rpx"
			}
		},
		onLoad() {
			uni.getSystemInfo({
			    success: function (res) {
					// console.log('@@@@',res)
			        // console.log(res.model);
			        // console.log(res.pixelRatio);
			        // console.log(res.windowWidth);
			        // console.log(res.windowHeight);
					// this.aheight = "height:"+res.windowHeight+"px";
			        // console.log(res.language);
			        // console.log(res.version);
			        // console.log(res.platform);
			    }
			});
		},
		methods: {
			chose(index)
			{
				console.log(index)
				this.selectIndex = index
			},
			onClick(){

			}
		}
	}
</script>

<style scoped>
	.head {
		padding-top: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/* '.search1 {
		margin-left: 5%;
		width: 60%;
		text-align: center;
	}
	.search22{
		width: 50%;
	}' */
	.headSearch{
		background-image: url(@/static/fandian/sousuo.png);
		text-align: center;
		width: 700rpx;
		background: #F5F5F5;
		height: 80rpx;
	}

	.content {
		display: flex;
		width: 100%;
		background-color: #0000FF;
		min-height: 1400rpx;
		margin-top: 20rpx;
		box-shadow: 0px 1px 4px 0px rgba(240, 240, 240, 0.8);
	}

	.left {
		width: 35%;
		background-color: #F5F5F5;
		/* min-height: 1400rpx; */
	}

	.right {
		width: 70%;
		background-color: #FFFFFF;
		/* min-height: 1400rpx; */
	}

	.left-list-item {
		width: 100%;
		flex-direction: row;
		align-items: center;
		text-align: center;
	}
	
	.left-list-item-up {
		background: #F5F5F5;
		border-radius: 0px 0px 20px 0px;
	}
	.left-list-item-down {
		background: #F5F5F5;
		border-radius: 0px 20px 0px 0px;
	}

	
	.left-list-item-unselect {
		width: 100%;
		background-color: #F5F5F5;
		flex-direction: row;
		align-items: center;
		text-align: center;
	}

	.left-list-item-text {
		width: 90%;
		text-align: center;
		color: #989898;
		font-size: 24rpx;
	}
	
	
	.left-list-item {
		width: 100%;
		
		flex-direction: row;
		align-items: left;
		text-align: left;
	}
	
	.right-list-item-text {
		margin-left: 30rpx;
		width: 90%;
		text-align: center;
		color: #474747;
		font-size: 26rpx;
	}
</style>
